<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.24.custom.css" type="text/css"/>
  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
  <link rel="stylesheet" href="examples.css" type="text/css"/>
  <style>
    .slick-footerrow-column {
      background: #87ceeb;
      text-overflow: clip;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      font: bold;
    }

    .slick-footerrow-column i {
      color: #ffffff;
    }

  </style>
</head>
<body>
<div style="position:relative">
  <div style="width:600px;">
    <div id="myGrid" style="width:100%;height:500px;"></div>
  </div>

  <div class="options-panel">
    <h2>Demonstrates:</h2>
    <ul>
      <li>Using a fixed footer row to implement summary column-level</li>
    </ul>
    <h2>View Source:</h2>
    <ul>
      <li><A href="https://github.com/ddomingues/SlickGrid/blob/gh-pages/examples/example-footer-row.html"
             target="_sourcewindow"> View the source for this example on Github</a></li>
    </ul>
  </div>
</div>

<script src="../lib/firebugx.js"></script>

<script src="../lib/jquery-1.7.min.js"></script>
<script src="../lib/jquery-ui-1.8.24.custom.min.js"></script>
<script src="../lib/jquery.event.drag-2.2.js"></script>

<script src="../slick.core.js"></script>
<script src="../slick.dataview.js"></script>
<script src="../slick.grid.js"></script>

<script>
  var dataView;
  var grid;
  var data = [];
  var options = {
    showFooterRow: true,
    explicitInitialization: true,
    syncColumnCellResize: true
  };
  var columns = [];
  var columnFilters = {};

  for (var i = 0; i < 10; i++) {
    columns.push({
      id: i,
      name: String.fromCharCode("A".charCodeAt(0) + i),
      field: i,
      width: 60
    });
  }

  $(function () {
    for (var i = 0; i < 100; i++) {
      var d = (data[i] = {});
      d["id"] = i;
      for (var j = 0; j < columns.length; j++) {
        d[j] = Math.round(Math.random() * 10);
      }
    }

    dataView = new Slick.Data.DataView();
    grid = new Slick.Grid("#myGrid", dataView, columns, options);


    dataView.onRowCountChanged.subscribe(function (e, args) {
      grid.updateRowCount();
      grid.render();
    });

    dataView.onRowsChanged.subscribe(function (e, args) {
      grid.invalidateRows(args.rows);
      grid.render();
    });

    grid.onFooterRowCellRendered.subscribe(function (e, args) {
      var total = 0;
      $.each(data, function () {
        total += this[args.column.field];
      });

      $(args.node)
        .append("<i>Total: </i>")
        .append(total);
    });

    grid.init();

    dataView.beginUpdate();
    dataView.setItems(data);
    dataView.endUpdate();
  })
</script>
</body>
</html>
